<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- 导入jquery核心类库 -->
<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<!-- 导入easyui类库 -->
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath }/js/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath }/js/easyui/ext/portal.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath }/css/default.css">	
<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/easyui/ext/jquery.portal.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/easyui/ext/jquery.cookie.js"></script>
<script
	src="${pageContext.request.contextPath }/js/easyui/locale/easyui-lang-zh_CN.js"
	type="text/javascript"></script>
<script
	src="${pageContext.request.contextPath }/js/easyui/jquery.ocupload-1.1.2.js"
	type="text/javascript"></script>
<script type="text/javascript">
	function doAdd(){
		//alert("增加...");
		$('#addExpenseWindow').window("open");
	}
	
	function doView(){
		alert("查看...");
	}
	
	function doDelete(){
		alert("删除...");
	}
	
	function doExport(){
		$('#exportExpenseWindow').window("open");
		//location.href="/exportBaoXiao.action";
	}
	//审批
	function doOk(){
		
		 var bx_rows = $("#grid").datagrid('getSelections');
		 if(bx_rows.length!=1){
				$.messager.alert("提示信息","请选择一位需要<span style='color: red;'>审核通过</span>的报销的信息！","warning")
			}else{
				$('#checkExpenseWindow').window("open");
				$("#checkExpenseForm").form('load',bx_rows[0]);
			}
	}
	///修改
	function doEdit(){
		var bx_rows = $("#grid").datagrid('getSelections');
		if(bx_rows == 1){
			$("#editExpenseWindow").window('open');
			$("#editExpenseForm").form('load',bx_rows[0]);
			
			
		}else{
			$.messager.alert("提示信息","请选择一位需要修改的报销信息！","warning")
		}
		
		
	}
	//工具栏
	var toolbar = [ {
		id : 'button-view',	
		text : '查询',
		iconCls : 'icon-search',
		handler : doView
	}, {
		id : 'button-add',
		text : '增加',
		iconCls : 'icon-add',
		handler : doAdd
	}, {
		id : 'button-Check',
		text : '审批',
		iconCls : 'icon-ok',
		handler : doOk
	},{
		id : 'button-Export',
		text : '导出',
		iconCls : 'icon-undo',
		handler : doExport
	},{
		id : 'button-edit',
		text : '修改',
		iconCls : 'icon-edit',
		handler : doEdit
	}];
	// 定义列
	var columns = [ [ {
		field : 'bxid',
		checkbox : true,
	},{
		field : 'accountid',
		title : '单据编号',
		width : 120,
		align : 'center'
	}, {
		field : 'accountname',
		title : '报销人姓名',
		width : 80,
		align : 'center'
	}, {
		field : 'bxmoney',
		title : '报销金额',
		width : 80,
		align : 'center',
	}, {
		field : 'expdate',
		title : '入职日期',
		width : 90,
		align : 'center',
	}, {
		field : 'stafftype',
		title : '员工状态',
		width : 80,
		align : 'center',
		formatter : function(data,row, index){
			if(data == 1){
				return '<span style="color: green;">在职</span>';
			}else{
				return '<span style="color: red;">离职</span>';
			}
		}
	}, {
		field : 'expComment',
		title : '报销原因',
		width : 320,
		align : 'center',
		formatter : function(data,row, index){
			if(data != null && data != ''){
				return '<span style="color: green;">'+data+'</span>';
			}else{
				return '<span style="color: red;">报销原因未填写</span>';
			}
		}
	}, {
		field : 'bxjob',
		title : '报销部门',
		width : 100,
		align : 'center',
		formatter : function(data,row, index){
			if(data == 0){
				return '业务部';
			}else if(data==1){
				return '人力资源部';
			}else if(data==2){
				return '安置部';
			}else if(data==3){
				return '财务部';
			}else{
				return '<span style="color: red;">部门未填写</span>';
			}
		}
	}, {
		field : 'accountdate',
		title : '报销日期',
		width : 90,
		align : 'center'
	}, {
		field : 'accouttype',
		title : '报销状态',
		width : 80,
		align : 'center',
		formatter : function(data,row, index){
			if(data == 1){
				return '<span style="color: green;">审批通过</span>';
			}else if(data == 2){
				return '<span style="color: red;">审批不通过</span>';
			}else{
				return '<span style="color: #440ef3;">未审批</span>';
			}
		}
	}, {
		field : 'accountcomment',
		title : '审批备注',
		width : 320,
		align : 'center',
		formatter : function(data,row, index){
			if(data != null && data != ''){
				return '<span style="color: green;">'+data+'</span>';
			}else{
				return '<span style="color: red;">审批未填写</span>';
			}
		}
	} ] ];
	
	$(function(){
		// 先将body隐藏，再显示，不会出现页面刷新效果
		$("body").css({visibility:"visible"});
		
		// 取派员信息表格
		$('#grid').datagrid( {
			iconCls : 'icon-forward',
			fit : true,
			border : false,
			rownumbers : true,
			striped : true,
			pageList: [30,50,100],
			pagination : true,
			toolbar : toolbar,
			url : "/ExpensePageQuery.action",
			idField : 'bxid',
			columns : columns,
			onDblClickRow : doDblClickRow
		});
		
		
		// 添加报销信息窗口
		$('#addExpenseWindow').window({
	        title: '添加报销信息',
	        width: 500,
	        modal: true,
	        shadow: true,
	        closed: true,
	        height: 470,
	        resizable:false
	    });
		
		// 修改报销信息窗口
		$('#editExpenseWindow').window({
	        title: '修改报销信息',
	        width: 500,
	        modal: true,
	        shadow: true,
	        closed: true,
	        height: 470,
	        resizable:false
	    });
		
		// 审批信息窗口
		$('#checkExpenseWindow').window({
	        title: '修改报销信息',
	        width: 500,
	        modal: true,
	        shadow: true,
	        closed: true,
	        height: 470,
	        resizable:false
	    });
		// 审批信息窗口
		$('#exportExpenseWindow').window({
	        title: '导出',
	        width: 400,
	        modal: true,
	        shadow: true,
	        closed: true,
	        height: 200,
	        resizable:false
	    });
	});
		

	function doDblClickRow(rowIndex, rowData){
		$("#editExpenseWindow").window('open');
		$("#editExpenseWindow").form('load',rowData);
	}
	
	//添加报销信息
	$(function(){
		$("#saveExpenseInfo").click(function(){
			
			var vali = $("#addExpenseForm").form('validate');
			if(vali){
				$("#addExpenseForm").submit();
				$("#addExpenseWindow").window('close');
			}else{
				$.messager.alert('提示信息','您填写的信息不完整,麻烦请认真填写！','error');  
			}
			
		});
		
	});
</script>	
</head>
<body class="easyui-layout" style="visibility:hidden;">
	<div region="center" border="false">
    	<table id="grid"></table>
	</div>
	<!-- 报销信息添加 -->
	<div class="easyui-window" title="对报销信息进行添加" id="addExpenseWindow" collapsible="false" minimizable="false" maximizable="false" style="top:20px;left:200px">
		<div region="north" style="height:31px;overflow:hidden;" split="false" border="false" >
			<div class="datagrid-toolbar">
				<a id="saveExpenseInfo" icon="icon-save" href="#" class="easyui-linkbutton" plain="true" >保存</a>
				<script type="text/javascript">
				
				</script>
			</div>
		</div>
		
		<div region="center" style="overflow:auto;padding:5px;" border="false">
			<form id="addExpenseForm" action="/addExpenseInfo.action" method="post">
				<table class="table-edit" width="80%" align="center">
					<tr class="title">
						<td colspan="2">添加报销信息</td>
					</tr>
					<tr>
						<td>单据编号</td>
						<td><input type="text" name="accountid" class="easyui-validatebox" required="true" /></td>
					</tr>
					<tr>
						<td>报销人姓名</td>
						<td><input type="text" name="accountname" class="easyui-validatebox" required="true"/></td>
					</tr>
					<tr>
						<td>报销金额</td>
						<td><input type="text" name="bxmoney" class="easyui-validatebox" validType='length[0,8]' required="true"/></td>
					</tr>
					<tr>
						<td>报销部门</td>
						<td><select name="bxjob">
								<option value="0">----业务部----</option>
								<option value="1">---人力资源部---</option>
								<option value="2">---安置部---</option>
								<option value="3">---财务部---</option>
						</select></td>
					</tr>
					<tr>
						<td>员工状态</td>
						<td><select name="stafftype">
								<option value="1">----在职----</option>
								<option value="0">----离职----</option>
						</select></td>
					</tr>
					<tr>
						<td>入职日期</td>
						<td><input type="text" name="expdate" class="easyui-datebox" required="true"/></td>
					</tr>
					<tr>
						<td>报销日期</td>
						<td><input type="text" name="accountdate" class="easyui-datebox" required="true"/></td>
					</tr>
					<tr>
						<td>报销原因</td>
						<td>
							<textarea rows="5" cols="24" name="expComment"></textarea>
						</td>
					</tr>
				</table>
			</form>
		</div>
	</div>
	<!-- 修改报销信息 -->
	<div class="easyui-window" title="对报销信息进行修改" id="editExpenseWindow" collapsible="false" minimizable="false" maximizable="false" style="top:20px;left:200px">
		<div region="north" style="height:31px;overflow:hidden;" split="false" border="false" >
			<div class="datagrid-toolbar">
				<a id="editExpenseInfo" icon="icon-save" href="#" class="easyui-linkbutton" plain="true" >保存</a>
				<script type="text/javascript">
					$(function(){
						$("#editExpenseInfo").click(function(){
							var vali = $("#editExpenseForm").form('validate');
							if(vali){
								$("#editExpenseForm").submit();
								$("#editExpenseWindow").window('close');
								
							}else{
								$.messager.alert('提示信息','您填写的信息不不完善','warning');  
							}
							
						})
					})
				</script>
			</div>
		</div>
		
		<div region="center" style="overflow:auto;padding:5px;" border="false">
			<form id="editExpenseForm" action="/editExpenseInfo.action" method="post">
				<input type="hidden" name="bxid">
				<table class="table-edit" width="80%" align="center">
					<tr class="title">
						<td colspan="2">修改报销信息</td>
					</tr>
					<tr>
						<td>单据编号</td>
						<td><input type="text" name="accountid" class="easyui-validatebox" required="true" /></td>
					</tr>
					<tr>
						<td>报销人姓名</td>
						<td><input type="text" name="accountname" class="easyui-validatebox" required="true"/></td>
					</tr>
					<tr>
						<td>报销金额</td>
						<td><input type="text" name="bxmoney" class="easyui-validatebox" validType='length[0,8]' required="true"/></td>
					</tr>
					<tr>
						<td>报销职位</td>
						<td><select name="bxjob">
								<option value="0">----业务部----</option>
								<option value="1">---人力资源部---</option>
								<option value="2">---安置部---</option>
								<option value="3">---财务部---</option>
						</select></td>
					</tr>
					<tr>
						<td>员工状态</td>
						<td><select name="stafftype">
								<option value="1">----在职----</option>
								<option value="0">----离职----</option>
						</select></td>
					</tr>
					<tr>
						<td>入职日期</td>
						<td><input type="text" name="expdate" class="easyui-datebox" required="true"/></td>
					</tr>
					<tr>
						<td>报销日期</td>
						<td><input type="text" name="accountdate" class="easyui-datebox" required="true"/></td>
					</tr>
					<tr>
						<td>报销原因</td>
						<td>
							<textarea rows="5" cols="24" name="expComment"></textarea>
						</td>
					</tr>
				</table>
			</form>
		</div>
	</div>
	<!-- 审批 -->
	<div class="easyui-window" title="对报销信息进行修改" id="checkExpenseWindow" collapsible="false" minimizable="false" maximizable="false" style="top:20px;left:200px">
		<div region="north" style="height:31px;overflow:hidden;" split="false" border="false" >
			<div class="datagrid-toolbar">
				<a id="checkExpenseInfo" icon="icon-save" href="#" class="easyui-linkbutton" plain="true" >保存</a>
				<script type="text/javascript">
					$(function(){
						$("#checkExpenseInfo").click(function(){
							var vali = $("#checkExpenseForm").form('validate');
							if(vali){
								$("#checkExpenseForm").submit();
								$("#checkExpenseWindow").window('close');
								
							}else{
								$.messager.alert('提示信息','您填写的信息不不完善','warning');  
							}
							
						})
					})
				</script>
			</div>
		</div>
		
		<div region="center" style="overflow:auto;padding:5px;" border="false">
			<form id="checkExpenseForm" action="/checkExpenseInfo.action" method="post">
				<input type="hidden" name="bxid">
				<table class="table-edit" width="80%" align="center">
					<tr class="title">
						<td colspan="2">修改报销信息</td>
					</tr>
					<tr>
						<td>报销人姓名</td>
						<td><input type="text" name="accountname" class="easyui-validatebox" /></td>
					</tr>
					<tr>
						<td>报销金额</td>
						<td><input type="text" name="bxmoney" class="easyui-validatebox"/></td>
					</tr>
					<tr>
						<td>审批状态</td>
						<td><select name="accouttype">
								<option value="0" style="color: #440ef3;">----未审批----</option>
								<option value="1" style="color: green;">----审批通过----</option>
								<option value="2" style="color: red;">----审批不通过----</option>
						</select></td>
					</tr>
					<tr>
						<td>审批备注</td>
						<td>
							<textarea rows="5" cols="24" name="accountcomment" required="true"></textarea>
						</td>
					</tr>
				</table>
			</form>
		</div>
	</div>
	
	<!-- 打印 -->
	<div class="easyui-window" title="对报销信息进行修改" id="exportExpenseWindow" collapsible="false" minimizable="false" maximizable="false" style="top:20px;left:200px">
		<div region="north" style="height:31px;overflow:hidden;" split="false" border="false" >
			<div class="datagrid-toolbar">
				<a id="exportExpenseInfo" icon="icon-save" href="#" class="easyui-linkbutton" plain="true" >导出</a>
				<script type="text/javascript">
					$(function(){
						$("#exportExpenseInfo").click(function(){
							var vali = $("#exportExpenseForm").form('validate');
							if(vali){
								$("#exportExpenseForm").submit();
								$("#exportExpenseWindow").window('close');
								
							}else{
								$.messager.alert('提示信息','您填写的信息不不完善','warning');  
							}
							
						})
					})
				</script>
			</div>
		</div>
		
		<div region="center" style="overflow:auto;padding:5px;" border="false">
			<form id="exportExpenseForm" action="/exportExpenseInfo.action" method="post">
				<input type="hidden" name="bxid">
				<table class="table-edit" width="80%" align="center">
					<tr class="title">
						<td colspan="2">根据<span style="color: red;">报销日期</span>导出</td>
					</tr>
					<tr>
						<td>开始日期</td>
						<td><input type="text" name="beginDate" class="easyui-datebox" required="true"/></td>
					</tr>
					<tr>
						<td>结束日期</td>
						<td><input type="text" name="endDate" class="easyui-datebox" required="true"/></td>
					</tr>
				</table>
			</form>
		</div>
	</div>
</body>
</html>	